<style scoped>
.container {
	padding: 16px;
}
</style>

<!-- 页面布局-->
<template>
	<div class="table">
		<!-- 主体区 -->
		<div class="container">
			<!-- 表单区 -->
			<div class="form-data-box">
				<el-form
					:model="formBean"
					:rules="validateRules"
					ref="form1"
					label-width="100px"
					class="ruleForm"
				>
					<el-row>
						<el-col :span="24">
							<el-form-item label="功能英文名" prop="funcname">
								<el-input :readonly="readOnly" v-model="formBean.funcname"></el-input>
							</el-form-item>
						</el-col>
						<el-col :span="24">
							<el-form-item label="功能中文名" prop="funcdesc">
								<el-input :readonly="readOnly" v-model="formBean.funcdesc"></el-input>
							</el-form-item>
						</el-col>
					</el-row>
				</el-form>
			</div>
			<!-- 表单区END -->
			<!-- 按钮操作区 -->
			<span slot="footer" class="form-btn-box">
				<el-button
					v-if="!readOnly"
					type="primary"
					@click="submitForm('form1')"
					v-loading.fullscreen.lock="fullscreenLoading"
				>确 定</el-button>
				<el-button @click="cnacelForm('form1')">取 消</el-button>
			</span>
			<!-- 按钮操作区END -->
		</div>
		<!-- 主体区END -->
	</div>
</template>

<script>
import { validateMobile } from "common/validate";
export default {
	data() {
		return {
			// 提交表单的loading设置标识
			fullscreenLoading: false,
			firstLoadedData: "{}",
			// 新增用户表单信息
			formBean: {
				funcname: "", //功能名称
				funcdesc: "" //功能描述
			},
			// 表单校验规则
			validateRules: {
				funcname: [
					{ required: true, message: "请输入功能名称", trigger: "blur" }
				],
				funcdesc: [
					{ required: false, message: "请输入功能描述", trigger: "blur" }
				]
			},
			//所选记录id
			selectedId: "",
			//事物类型
			actType: "",
			// 表单只读状态
			readOnly: false,
			readOnlyEdt: false
		};
	},
	// 进入页面加载数据
	activated() {
		this.handleInitLoad();
	},
	methods: {
		/**
		 * 组件初始化加载
		 */
		handleInitLoad() {
			this.initFormData();
		},

		/**
		 * 取消返回
		 * @augments formName 表单名称
		 */
		cnacelForm(formName) {
			this.$refs[formName].resetFields();
			// this.$router.push({
			//   name: "amsroleList",
			//   params: {
			//     type: "cancel"
			//   }
			// });
			this.$emit("cancel", this.cancelData);
		},
		/**
		 * 重置表单
		 * @augments formName 表单名称
		 */
		resetForm(formName) {
			this.formBean = JSON.parse(this.firstLoadedData);
		},
		/**
		 * 提交表单
		 * @augments formName 表单名称
		 */
		submitForm(formName) {
			this.$refs[formName].validate(valid => {
				if (valid) {
					this.$emit("ok", this.formBean);
				} else {
					// 表单校验失败
					// this.$error("数据校验失败.");
				}
			});
		}
	}
};
</script>
